<script setup lang="ts">
import {computed, onBeforeUnmount, onMounted, ref} from "vue";
import {useOrders} from "./utils/hook";
import {PureTableBar} from "@/components/RePureTableBar";
import {useRenderIcon} from "@/components/ReIcon/src/hooks";
import {useI18n} from "vue-i18n";
import {useRoute} from 'vue-router'
import Refresh from "@iconify-icons/ep/refresh"
import {hasPerms} from "@/utils/auth";
import { debounce } from 'lodash-es';
const { t } = useI18n();
const route = useRoute()
defineOptions({
  name: "OrdersList"
});

const formRef = ref();
const tableRef = ref();
const {
  form,expandedRowKeys, loading, columns,copy_order,onlySearch,sortChange,
  dataList,addApplyLog,financial_status_arr,salesman_arr,shop_group_list_arr,
  shopList,setBatchSearch,searchCondList,teamList,selectedNum,onSelectionCancel,expandStatus,tags3,tags,tags2,
  onSearch,sta_order_statc,tags5,tags6,guideline,
  modal_action,export_data,statistics,changeStatus,
  resetForm, openDialog,onSaveOrderBatch,ordersSynchronous,
  handleDelete, pagination, handleSizeChange,  handleCurrentChange, handleSelectionChange
} = useOrders(tableRef);

function onFullscreen() { // 重置表格高度
  tableRef.value.setAdaptive();
}
const size = ref("small");
const salemans = computed(() => ((form.team_id==''||form.team_id == undefined)
  ? salesman_arr.value
  : salesman_arr.value.filter(x=>(x.dept?.id==form.team_id)))
);

onMounted(() => {
  window.addEventListener('keyup', handleEnterKey);
});
onBeforeUnmount(() => {
  window.removeEventListener('keyup', handleEnterKey);
});
const handleEnterKey = (e) =>{
  if (e.key === 'Enter'&& formRef.value?.$el?.contains(e.target)) {
    onSearch();
  }
}
const onSearchDebounced = debounce(onSearch, 300);

</script>

<template>
  <div class="main">
    <el-form ref="formRef" :inline="true" :size="size" :model="form" class="search-form bg-bg_color w-[99/100] pl-4 pt-[12px] overflow-auto" >

      <el-form-item label="" prop="diy_group">
        <el-select v-model="form.diy_group" placeholder="部" clearable filterable class="!w-[80px]" @change="form.store_id=[]">
          <el-option v-for="(item) in shop_group_list_arr" :label="item.name" :value="item.id" :disabled="item.id==''"/>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="store_id" v-if="shopList.length>0">
        <el-select v-model="form.store_id" :max-collapse-tags="1" collapse-tags popper-class="shop-select-header"
          placeholder="选择店铺(多选)" multiple filterable  style="width: 200px;" >
          <el-option v-for="(item, index) in shopList.filter(x=>x.group==form.diy_group)" :key="index" :label="item.shop_domain" :value="item.id"/>
<!--          <el-option v-for="(item, index) in shopList" :key="index" :label="item.group_name+item.shop_domain" :value="item.id"/>-->
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="team_id" v-if="teamList.length>0">
        <el-select v-model="form.team_id" placeholder="小组" :collapse-tags-tooltip="false" collapse-tags clearable filterable multiple class="!w-[130px]">
          <el-option v-for="(item) in teamList" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="diy_sales">
        <el-select v-model="form.diy_sales" placeholder="业务员" clearable filterable class="!w-[100px]">
          <el-option v-for="item in salemans" :label="item.dept?.name+'-'+item.username" :value="item.id" :disabled="item.id==''"/>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="utm_source">
        <el-select v-model="form.utm_source"  placeholder="UTM来源"  clearable class="!w-[80px]">
          <el-option label="facebook" value="facebook" />
          <el-option label="instagram" value="instagram" />
          <el-option label="tiktok" value="tiktok" />
          <el-option label="youtube" value="youtube" />
          <el-option label="nm30.abv.bg" value="nm30.abv.bg" />
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="diy_tags">
        <el-select v-model="form.diy_tags" placeholder="账号状态" clearable  class="!w-[100px]">
          <el-option label="未填写" value=" "/>
          <el-option v-for="(item) in tags" :label="item.name" :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="status">
        <el-select v-model="form.status" placeholder="订单状态" clearable class="!w-[100px]" @change="changeStatus">
          <el-option label="待处理" value="110"/>
          <el-option label="未完成" value="100"/>
          <el-option label="取消" value="190"/>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="diy_tags2">
        <el-select v-model="form.diy_tags2" placeholder="是否联系" clearable  class="!w-[95px]">
          <el-option label="未填写" value=" "/>
          <el-option v-for="(item) in tags2" :label="item.name" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="diy_tags3">
        <el-select v-model="form.diy_tags3" placeholder="是否成交" clearable  class="!w-[85px]">
            <el-option v-for="(item) in tags3" :label="item.name" :value="item.value" :disabled="item.value==''"/>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="diy_tags4">
        <el-select v-model="form.diy_tags4" placeholder="是否回复" clearable  class="!w-[85px]">
            <el-option label="未填写" value=" "/>
            <el-option label="未回复" value="未回复"/>
            <el-option label="已回复" value="已回复"/>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="diy_tags6">
        <el-select v-model="form.diy_tags6" placeholder="物流跟进状态" clearable  class="!w-[100px]">
          <el-option v-for="(item) in tags6" :label="item.name" :value="item.value" :disabled="item.value==''"/>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="financial_status">
        <el-select v-model="form.financial_status" placeholder="付款状态" clearable  class="!w-[100px]">
            <el-option v-for="(item) in financial_status_arr" :label="item.name" :value="item.value" :disabled="item.value==''"/>
        </el-select>
      </el-form-item>
      <el-form-item prop="search">
        <el-input v-model="form.search" style="max-width: 600px; " clearable autosize @dblclick="setBatchSearch" placeholder="可批量查询" class="input-with-select" >
          <template #prepend>
            <el-select v-model="form.search_field" placeholder="选择查询条件"  style="width: 100px">
              <el-option v-for="(item) in searchCondList" :label="'按'+item.name" :value="item.value" :disabled="item.value==''"/>
            </el-select>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="time">
        <el-select v-model="form.search_field2" placeholder="选择时间" class="search_field" style="width: 100px;border-radius:0">
          <el-option label="按分配时间" value="diy_allo_at" />
          <el-option label="按下单时间(北京时间)" value="created_at" />
          <el-option label="按下单时间(当地时间)" value="created_at_US" />
          <el-option label="按付款时间(北京时间)" value="pay_at" />
          <el-option label="按付款时间(当地时间)" value="pay_at_US" />
          <el-option label="按最后修改时间" value="act_at" />
          <el-option label="首次同步时间" value="frist_aysc_at" />
          <el-option label="按最后同步时间" value="last_aysc_at" />
          <el-option label="按订单关闭时间" value="closed_at" />
          <el-option label="按电联跟进时间" value="caller_at" />
        </el-select>
        <el-date-picker
          v-model="form.time" value-format="YYYY-MM-DD" format="YYYY-MM-DD"
          type="daterange" style="width: 200px;border-radius: 0px;border-left: 0;margin-left: -1px;"
          range-separator="~" prefix-icon=""
          start-placeholder="Start date"
          end-placeholder="End date"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="" prop="caller_user">
        <el-select v-model="form.caller_user" placeholder="电联用户" clearable filterable class="!w-[100px]">
          <el-option v-for="item in salemans.filter(x=>x.site_group==-4)" :label="item.dept?.name+'-'+item.username" :value="item.id" :disabled="item.id==''"/>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="diy_tags5">
        <el-select v-model="form.diy_tags5" placeholder="电联情况" clearable filterable class="!w-[100px]">
          <el-option v-for="item in tags5" :label="item.name" :value="item.value"/>
        </el-select>
      </el-form-item>

      <el-form-item label="" prop="fugou">
        <el-checkbox v-model="form.fugou">复购</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="useRenderIcon('ri:search-line')" :loading="loading" @click="onSearchDebounced"> {{ t("buttons.search") }}</el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)" style="margin-left:5px;">{{ t("buttons.reset") }}</el-button>
      </el-form-item>
    </el-form>

    <PureTableBar :title="t(route.meta.title)" tableName="orders" :showColumnsSet="true" :isExpandAll="expandStatus"
      :columns="columns" :tableRef="tableRef?.getTableRef()"
      @refresh="onlySearch" @fullscreen="onFullscreen">
      <template #title>
        <el-tabs v-model="form.tab_id" class="bg-bg_color  w-[99/100]  pt-[1px] overflow-auto"  style="margin-top:-8px;" @tab-click="onlySearch">
          <el-tab-pane :label="'全部订单('+(sta_order_statc[0]||0)+')'" name="0"></el-tab-pane>
          <el-tab-pane :label="'未分配('+(sta_order_statc[1]||0)+')'" name="-1"></el-tab-pane>
          <el-tab-pane :label="'待处理('+(sta_order_statc[2]||0)+')'" name="1"></el-tab-pane>
          <el-tab-pane :label="'弃单('+(sta_order_statc[3]||0)+')'" name="2"></el-tab-pane>
          <el-tab-pane  name="3">
            <template #label>
              <span slot="label" style="color: red;">跟进超时({{sta_order_statc[4]||0}})</span>
            </template>
          </el-tab-pane>
          <el-tab-pane :label="'引流分配订单'" name="4"></el-tab-pane>
          <div >
            <span v-if="selectedNum > 0" style="font-size: var(--el-font-size-base)" class="text-[rgba(42,46,54,0.5)] dark:text-[rgba(220,220,242,0.5)]">
            已选 {{ selectedNum }} 项
          </span>
            <el-tooltip content="请先选择订单" placement="top" :disabled="selectedNum>0" >
              <el-button v-perms="'order:btn:allo'" v-show="form.diy_status==-1 || (form.diy_status==0 &&form.diy_sales>0)" type="warning" :disabled="selectedNum<1" @click="modal_action(5)" :size="size">{{ t("buttons.allo") }}</el-button>
            </el-tooltip>
            <el-button v-if="selectedNum>0" @click="copy_order('order_number')" :size="size">{{ t("buttons.copyOrderNumber") }}</el-button>
            <el-button v-if="selectedNum>0" @click="copy_order('customer_email')" :size="size">{{ t("buttons.copyOrderEmail") }}</el-button>
            <el-button v-if="hasPerms('order:btn:daochu')" @click="export_data" :size="size">{{ t("buttons.exportExcel") }}</el-button>
            <el-button v-if="dataList.filter(x=>x.isModified==true).length>0" @click="onSaveOrderBatch" :size="size">一键保存</el-button>
          </div>
        </el-tabs>
      </template>
      <template v-slot="{ size, dynamicColumns }">
        <pure-table ref="tableRef" adaptive
          :adaptiveConfig="{ offsetBottom: 70 }" :expand-row-keys="expandedRowKeys"  @sort-change="sortChange"
                    align-whole="center" row-key="order_number" showOverflowTooltip table-layout="auto" cell-class-name="copyable-cell"
          :loading="loading" :size="size" :data="dataList"
          :pagination="{ ...pagination, size }" :columns="dynamicColumns"
          :header-cell-style="{ background: 'var(--el-fill-color-light)',color: 'var(--el-text-color-primary)' }"
          :border="true" @selection-change="handleSelectionChange"
          @page-size-change="handleSizeChange"
          @page-current-change="handleCurrentChange"
        >
        </pure-table>
      </template>

      <template #buttons>
        <el-button size="small" type="danger" @click="addApplyLog" v-perms="'order:btn:renling'">订单认领</el-button>
        <el-button size="small" type="success" @click="guideline" >待补参考</el-button>
        <el-button size="small" type="warning" @click="ordersSynchronous" >更新订单</el-button>
      </template>
    </PureTableBar>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-table__inner-wrapper::before) { height: 0;}
:deep(.search_field .el-select__wrapper) { border-radius: 0;border-right: 0;margin-right: -1px;}
:deep(.el-form--inline .el-form-item) {margin-right: 8px;}
:deep(.el-pagination) {margin: 3px 0 0 0 !important;}
.main-content {margin: 15px 15px 0 !important;}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 8px;
  }
}
:deep(.el-tabs__header) {margin:0 0 8px;}

:deep(.orderNumber .el-tooltip){min-width: 155px !important;}
.statistics-panel {
  margin: 10px;
  padding: 10px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.statistic-item {
  text-align: center;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #f5f7fa;
  transition: box-shadow 0.3s ease;
}
.statistic-item:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.highlight-item {
  background-color: #409eff;
  border-color: #409eff;
}
.highlight-item .statistic-label {
  color: #ffffff;
}
.highlight-item .statistic-value {
  color: #ffffff;
}

.statistic-value {
  font-size: 11px;display: inline-flex; background-color: #fff;border-radius: 7px;margin-left: 5px; padding: 2px;
  color: #303133;
  font-weight: bold;
}
.shop-select-header {
  .el-checkbox { display: flex;height: unset; }
  .is-closable .el-tag--info{max-width: 140px !important;}
}
.copyable-cell {
  cursor: pointer;
}

.copyable-cell:hover {
  background-color: var(--el-fill-color-light);
}
span.goods_quantity{
  background-color: red !important;
  border-radius: 5px;
  color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  border: 1px solid var(--el-bg-color);
}
:deep(.el-select__wrapper){
  background-color: inherit !important;
}
//有色块的文字颜色
:deep(.diy .el-select__placeholder){
 color: #313030;
}
.no-icon .el-input__suffix {
  display: none;width: 100px;
}

:deep(.el-textarea.is-disabled .el-textarea__inner),
:deep(.el-select__wrapper.is-disabled .el-select__selected-item) {
  color: #606060; /* 你想设置的新颜色 */
}
</style>


<style>
.is-penultimate > .el-tree-node__children > div {
  display: inline-block;
  margin-right: 4px;float:left;
}
</style>
